<template>
    <div>
        <div class="c-card-detail-c">
            <div class="y13">
                <img src="@/assets/images/danei-pic.jpg" class="pic13" />
                <div class="y13_container">
                    <div class="title">《大内密谈》</div>
                    <!-- <div class="time">每周四 22:00</div> -->
                    <div class="flex">
                        <div>电视节目</div>
                        <div>独立中文播客</div>
                    </div>
                    <!-- <img class="pic13_min" src="@/assets/images/danei-pic-min.png" /> -->
                </div>
                <div class="content">Midnightalks大内密谈，是由北京深夜谈谈文化有限公司出品的一档人气播客节目，由各类自身行业从业者组成强大主播阵容，打造以音乐为核心的泛文化声音创作内容。</div>
            </div>
            <div class="person_wrap">
                <div class="person left">
                    <div class="left">
                        <img src="@/assets/images/danei-pic-1.jpg" />
                    </div>
                    <div class="right">
                        <div class="title">相征</div>
                        <div class="content">《大内密谈》创始人<br />NOVA娱乐主理人、前华纳音乐、环球音乐中国区市场总监</div>
                    </div>
                </div>
                <div class="person right">
                    <div class="left">
                        <div class="title">丁薇</div>
                        <div class="content">华语乐坛极具分量的音乐唱作人，囊括了最佳专辑、最佳制作人、最佳女歌手等大奖。曾发行《松绑》等5张个人专辑。也是刘德华《我要你的每天》和那英《爱要有你才完美》等经典金曲的创作者</div>
                    </div>
                    <div class="right">
                        <img src="@/assets/images/danei-pic-2.png" />
                    </div>
                </div>
            </div>
            <div class="title_wrap">
                <div class="title">本期内容</div>
            </div>
            <img src="@/assets/images/audio-img.jpg" class="audio_Img" />
            <div class="detail">COLMO携手《大内密谈》，当家主播相征与著名华语音乐唱作人丁薇一起探讨《十三邀·夏日特别版》，一起聊聊许知远和张亚东，从偏见到音乐，从观感到生活，8月13日周四晚22:00邀您收听，特别呈献播客节目。</div>
            <div class="listen">
                <img src="@/assets/images/listen-pic.png" />
                <div class="content">
                    <div class="title">大内密谈</div>
                    <div class="text">一次关于理性感性和生活本体的对话</div>
                </div>
                <div class="icon_wrap" @click="playAudio">
                    <img src="@/assets/images/play-icon.png" v-if="!audioStatus" />
                    <img src="@/assets/images/pause-icon.jpg" v-else />
                    <!-- <div v-else class="pause_wrap"></div> -->
                </div>
            </div>
            <!-- <div class="app">Apple Podcasts / 网易云音乐 / 荔枝FM / QQ音乐 / 喜马拉雅 / 蜻蜓FM / 微信小程序 / 云听APP</div> -->
            <img src="@/assets/images/app.jpg" class="app_pic" />
        </div>
        <c-backTop @close="$emit('close')" />
    </div>
</template>
<script>
export default {
    data () {
        return {
            audio: null,
            audioStatus: false
        }
    },
    mounted () {
        this.audio = document.createElement('audio')
        this.audio.src = require('@/assets/images/audio.mp3')
    },
    methods: {
        playAudio () {
            this.audioStatus = !this.audioStatus
            if (this.audioStatus) {
                this.audio.play()
            } else {
                this.audio.pause()
            }
        }
    }
}
</script>
<style lang="less" scoped>
.c-card-detail-c {
    background-color: #fff;
    border-top: 1px solid #c9c9c9;
    padding: 0.51rem 0.3rem 0.58rem;
    .y13 {
        border-bottom: 1px solid #c9c9c9;
        .pic13 {
            width: 100%;
            display: block;
        }
        .y13_container {
            // padding-left: 2.47rem;
            padding-top: 0.28rem;
            position: relative;
            margin-bottom: 0.3rem;
            .pic13_min {
                width: 2rem;
                height: 2.45rem;
                position: absolute;
                bottom: 0;
                left: 0.2rem;
                border-radius: 0.1rem;
            }
            .title {
                font-size: 0.3rem;
                color: #000000;
                margin-bottom: 0.3rem;
                margin-left: -0.15rem;
                font-weight: 700;
            }
            .time {
                font-size: 0.22rem;
                color: #9d9d9d;
                margin-bottom: 0.1rem;
            }
            .flex {
                display: flex;
                align-items: center;
                div {
                    padding: 0.04rem 0.1rem;
                    text-align: center;
                    border-radius: 0.07rem;
                    border: 1px solid #9d9d9d;
                    color: #9d9d9d;
                    font-size: 0.22rem;
                    margin-right: 0.13rem;
                    &:last-of-type {
                        margin-right: 0;
                    }
                }
            }
        }
        .content {
            // padding: 0 0.1rem 0 0.18rem;
            font-size: 0.22rem;
            line-height: 0.34rem;
            color: #000000;
            padding-bottom: 0.55rem;
            text-align: justify;
        }
    }
    .person_wrap{
        padding: 0.64rem 0 0.9rem;
        .person{
            display: flex;
            color: #000000;
            margin-bottom: 0.63rem;
            &:last-of-type{
                margin-bottom: 0;
            }
            img{
                width: 1.6rem;
                height: 1.87rem;
                display: block;
            }
            .title{
                font-size: 0.28rem;
                font-weight: 700;
                margin-bottom: 0.2rem;
            }
            .content{
                font-size: 0.22rem;
                line-height: 0.32rem;
                text-align: justify;
            }
            &.left{
                .right{
                    flex: 1;
                    padding-left: 0.38rem;
                    padding-top: 0.17rem;
                }
            }
            &.right{
                text-align: right;
                .left{
                    flex: 1;
                    padding-top: 0.14rem;
                    padding-right: 0.15rem;
                }
                .right{
                    // padding-right: 0.48rem;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    .title_wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.36rem;
        .title{
            font-size: 0.3rem;
            color: #000000;
            font-weight: 700;
            box-shadow: 0 -0.16rem 0px #cb8345 inset;
            display: inline-block;
            padding: 0 0.1rem;
        }
    }
    &>.detail{
        font-size: 0.23rem;
        line-height: 0.36rem;
        color: #000000;
        // padding: 0  0.12rem 0 0.15rem;
        text-align: justify;
        margin-bottom: 1rem;
    }
    .listen{
        display: flex;
        margin-bottom: 0.82rem;
        &>img{
            width: 1.5rem;
            height: 1.57rem;
        }
        .content{
            flex: 1;
            height: 100%;
            padding: 0.04rem 0 0 0.2rem;
            .title{
                font-size: 0.3rem;
                margin-bottom: 0.20rem;
                font-weight: 700;
            }
            .text{
                font-size: 0.22rem;
            }
        }
        .icon_wrap{
            height: 1.57rem;
            display: flex;
            align-items: center;
            color: #000000;
            img{
                width: 0.51rem;
                height: 0.51rem;
            }
            .pause_wrap{
                width: 0.46rem;
                height: 0.46rem;
                border: 0.02rem solid #000;
                border-radius: 50%;
                position: relative;
                &::after, &::before{
                    content: '';
                    width: 0.03rem;
                    height: 0.2rem;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: #000000;
                }
                &::after{
                    left: 0.15rem;
                }
                &::before{
                    right: 0.15rem;
                }
            }
        }
    }
    .app{
        padding: 0 0.28rem;
        font-size: 0.22rem;
        line-height: 0.3rem;
        color: #000000;
        font-weight: 700;
        margin-bottom: 0.33rem;
    }
    .app_pic{
        width: 100%;
        display: block;
    }
    .audio_Img{
        width: 100%;
        display: block;
        margin-bottom: 0.2rem;
    }
}
</style>
